import React, { Component } from 'react';

import '../styles/tabbar.scss'

class Tabbar extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:2,
            btns:[
                { icon:'',text:'店铺' },{ icon:'',text:'分类' },{ icon:'',text:'所有商品' },
                { icon:'',text:'购物车' },{ icon:'',text:'个人中心' }
            ]
        }
    }
    handleClick(index){
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className='tabbar'>
                {/* 列表渲染 */}
                {
                   this.state.btns.map((item,index)=>{
                    return (
                        <div  className={ 'btns ' + (this.state.currentIndex == index ? 'active' : '') } key={index} onClick={()=>{ this.handleClick(index) }}>
                                <span className={ 'iconfont ' + item.icon }></span>
                                <div className="text">{item.text}</div>
                            </div>
                    )
                   })
                }
            </div>
        );
    }
}

export default Tabbar;